<template>
  <div>
    <ul>
      <!-- v-for 必须写key,key必须是唯一的不重复的数字或字符串 
           有id用id,无id用下标
           作用: 提高vue更新性能
        -->
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>

    <ul>
      <li v-for="obj in stuArr" :key="obj.id">
        {{ obj.name }}-{{ obj.gender }}-{{ obj.hobby }}
      </li>
    </ul>

    <ul>
      <li v-for="(v,k) in tObj" :key="k">
        {{k}}={{v}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["Rose", "Ian", "Rena"],
      stuArr: [
        {
          id: 1001,
          name: "LL",
          gender: "female",
          hobby: "drink",
        },
        {
          id: 1002,
          name: "TT",
          gender: "female",
          hobby: "eat",
        },
        {
          id: 1003,
          name: "TTxx",
          gender: "male",
          hobby: "makeup",
        },
      ],
      tObj: {
        name: "Alen",
        age: 15,
        class: "1期",
      },
    };
  },
};
</script>

<style>
</style>